<!--
 * @Author: Ryan
 * @Date: 2022-12-08 12:06:25
 * @LastEditors: Ryan
 * @LastEditTime: 2022-12-08 17:23:46
 * @Description: 开发指南-API管理
 * @FilePath: \vue-admin-system\src\views\develop\api\index.vue
-->

<template>
  <div class="app-container">
    <div class="api-container">
      <div class="block">
        <h2>统一管理</h2>
        <p>项目所有的API接口统一在'/src/api'目录下进行管理，按业务模块进行划分。通常一个一级或二级菜单对应一个业务模板，也就是一个API目录。</p>
        <code-editor
          :value="directoryValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <el-divider />
      </div>

      <div class="block">
        <h2>示例</h2>
        <p>以/api/basics/user.js的内容为例：</p>
        <code-editor
          :value="exampleValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <el-divider />
      </div>
    </div>
  </div>
</template>

<script>
import CodeEditor from 'simple-code-editor'
export default {
  name: 'DevelopApi',
  components: { CodeEditor },
  data() {
    return {
      directoryValue: `    --src
      --api
        --basics
          --user.js
            ----login
            ----getInfo
            ----logout
        --example
        --
      `,
      exampleValue: `
    // 引入HTTP request工具类
    import request from '@/utils/request'

    // 登录接口
    export function login(params) {
      return request({
        // 接口地址
        url: '/passport/login',
        // 请求方式：get、post、put、delete
        method: 'get',
        // 请求参数
        params
      })
    }

    // 获取用户信息
    export function getInfo() {
      return request({
        url: 'player/info',
        method: 'get'
      })
    }

    // 用户登出
    export function logout() {
      return request({
        url: 'passport/out',
        method: 'get'
      })
    }
      `
    }
  }
}
</script>

<style scoped lang="scss">
.api-container {
  // width: 870px;
  margin: 0 auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media (max-width: 992px) {
    width: auto;
  }

  .block {
    h2 {
      padding-bottom: 20px;
    }

    h4 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
